<template>
    <view>
        <view class="container" :style="{ width: containerWidth + 'px', height: containerHeight/4*3 + 'px'}">
            <view class="goodsList" :style="{ 'transition-delay': delay+ 's' }">
                <view v-for="(goods, index) in goodsList" :key="index" class="goodsList-item"
                      :style="{ width: goodsListWidth + 'px', height: goodsListWidth/4*3 + 'px'}">
                    <view :style="getBackgroundStyle(goods.tag)" class="goods">
                        <u-image :src="goods.image" width="100%" height="100%"></u-image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'openBox',
    props: {
        goodsList: {
            type: Array,
            default: () => [],
            required: true
        },
        prizeInfo: {
            type: Object,
            required: true
        },
        windowsWidth: {
            type: Number,
            required: true
        },
        delay: {
            type: Number,
            required: true
        },

    },
    data() {
        return {}
    },
    mounted() {
        this.animation()
    },
    computed: {
        containerWidth() {
            return (this.windowsWidth / 5 + 10) * 100
        },
        containerHeight() {
            return this.windowsWidth / 5 + 20;
        },
        goodsListWidth() {
            return this.windowsWidth / 5;
        }
    },
    methods: {
        // 计算背景图
        getBackgroundStyle(tag) {
            // 根据tag的值返回不同的背景图样式
            switch (tag) {
                case 'legend':
                    return "background: linear-gradient(167deg,#4C5070 32.38%,#AC772B 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%);";
                case 'chuanqi':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#902133 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                case 'supreme':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#5E1D73 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%);';
                case 'rare':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#2C1D7E 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                case 'normal':
                    return 'background: linear-gradient(167deg,#4C5070 27.46%,#7E849C 100%),linear-gradient(90deg,#FFF1EB 0%,#ACE0F9 100%)';
                default:
                    return '';
            }
        },
        animation() {
            let goodsList = document.getElementsByClassName('goodsList')
            setTimeout(() => {
                for (let i = 0; i < goodsList.length; i++) {
                    goodsList[i].style.setProperty('transform', "translateX(-" + 8.4 * this.windowsWidth + "px)");
                }
            }, 100);
        }
    }

}

</script>

<style scoped lang="scss">
.container {
    //width: 1000px;
    //width: 100vw;
    //height: 100px;
    background-color: #0f0e2d;
    overflow: hidden;
}

.goodsList {
    display: flex;
    justify-content: flex-start;
    width: 10000px;
    //width: 100vw;
    //height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
    transform: translateX(0);
    transition: transform 3.5s, ease-in-out-cubic;
}

.goodsList-item {
    //width: 100px;
    //height: 100px;
    //margin-right: 20rpx;
    //margin-right: 5px;
    //margin-left: 5px;
    display: inline-block;
}

.goods {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    object-fit: fill;
}


</style>
